
<template>
  <div id="container">
    <!-- <div class='pdf-page'> -->
    <canvas id="the-canvas"></canvas>
    <div class="foot" v-if='pdfDoc'>
      <button class='left' v-if="pageNum>1" @click="onPrevPage">上一页</button>
      <button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一页</button>
    </div>
    <!-- </div> -->
  </div>
</template>
<script>
  import PDFJS from 'pdfjs-dist'

  export default {
    data () {
      return {
        pdfDoc: null,
        pageNum: 1,
        pageRendering: false,
        pageNumPending: null,
        scale: 0.9
      }
    },
    methods: {
      showPDF (url) {
        let _this = this
        PDFJS.getDocument(url).then(function (pdf) {
          _this.pdfDoc = pdf
          _this.renderPage(1)
        })
      },
      renderPage (num) {
        this.pageRendering = true
        let _this = this
        this.pdfDoc.getPage(num).then(function (page) {
          var viewport = page.getViewport(_this.scale)
          let canvas = document.getElementById('the-canvas')
          canvas.height = viewport.height
          canvas.width = viewport.width

          // Render PDF page into canvas context
          var renderContext = {
            canvasContext: canvas.getContext('2d'),
            viewport: viewport
          }
          var renderTask = page.render(renderContext)

          // Wait for rendering to finish
          renderTask.promise.then(function () {
            _this.pageRendering = false
            if (_this.pageNumPending !== null) {
              // New page rendering is pending
              this.renderPage(_this.pageNumPending)
              _this.pageNumPending = null
            }
          })
        })
      },
      queueRenderPage (num) {
        if (this.pageRendering) {
          this.pageNumPending = num
        } else {
          this.renderPage(num)
        }
      },
      onPrevPage () {
        if (this.pageNum <= 1) {
          return
        }
        this.pageNum--
        this.queueRenderPage(this.pageNum)
      },
      onNextPage () {
        if (this.pageNum >= this.pdfDoc.numPages) {
          return
        }
        this.pageNum++
        this.queueRenderPage(this.pageNum)
      }
    }
  }
</script>

<style scoped>
  #container {
    background-color: rgba(0,0,0,0.75);
    position:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    padding: 5px;
  }

  .pdf-page {

  }

  .foot {
    position: fixed;
    transform: translate(-50%,0);
    left: 50%;
  }
</style>
